(WIP)Preactでweb applicationを作る
code:app.tsx
const app = createApp();
app.handle("/", async (req) => {
await req.respond({
status: 200,
headers: new Headers({
"content-type": "text/html; charset=UTF-8",
}),
body: ReactDOMServer.renderToString(
<html>
<head>
<meta charSet="utf-8" />
<title>Preact in Deno</title>
</head>
<body>
<div id="app" />
<script src="/assets/index.js" />
</body>
</html>,
),
});
});
// index.jsを返す
app.get("/assets/index.js", async (req) => {
await req.respond({
status: 200,
headers: new Headers({
"content-type": "application/javascript; charset=UTF-8",
}),
body: await Deno.readTextFile('./assets/index.js'),
});
});
const port = 8888;
app.listen({ port });
console.log(go to http://localhost:${port});
なぜか ReferenceError: React is not definedが出てうまく動いてくれない……
code:index.tsx.disable(tsx)
const App = () => <div>Hello World!</div>;
render(<App />, document.getElementById("app"));
こっちなら行けそうだめだった
code:tsx
const App = () => <div>Hello World!</div>;
render(<App />, document.getElementById("app"));
code:tsx
const App = () => <div>Hello World!</div>;
render(<App />, document.getElementById("app"));
このあたりが参考になりそう
nodejsを併用している
もしくは、tsconfig.jsonを併用する?
code:json
{
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
React.createElementを置換できさえすればいい
これならいける?
deno jsxで検索したら見つけた
2021-05-06 09:33:25 /** @jsx h */つけたらいけた!
tsconfig.jsonはいらない
--reloadでindex.tsxをlocalに再downloadする必要があった
code:sh
code:index.tsx
/** @jsx h */
const App = () => <div>Hello World!</div>;
render(<App />, document.getElementById("app"));
code:tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"inlineSourceMap": true,
"isolatedModules": true,
"jsx": "react",
"jsxFactory": "h",
"module": "esnext",
"strict": true,
"target": "esnext",
"useDefineForClassFields": true
}
}